<template>
  <view class="life-lists">
    <view class="dis-f justify-between" style="display: flex; justify-content: space-between; align-items: center">
      <view class="dis-f" style="display: flex">
        <view style="display: flex; align-items: center" :class="infoType === 2 ? 'dis-f align-center' : ''">
          <!-- 商户头像 -->
          <image class="vam border-radius icon-img2" :src="imgurl + infoData.merAvatar"></image>
        </view>
        <view class="lists-content mgl-2" style="margin-left: 12px">
          <!-- 商家名称 -->
          <view class="title color01 w100 base-ellipsis font-medium font-s14 bottom" style="font-size: 28rpx">
            {{ infoData.merName }}
          </view>
          <view>
            <view v-for="(category, index) in infoData.categoryName ? infoData.categoryName.split(',') : []" :key="index" style="margin: 0 10rpx 10rpx 0; display: inline-block">
              <span style="font-size: 20rpx; color: #fe7f41; background-color: #fff1eb; padding: 3px 6px">{{ category }}</span>
            </view>
          </view>
          <view class="colordesc bottom font-s12" style="display: flex">
            <!-- 商户地址 -->
            <!-- <van-icon size="12" class="base-icon mgr-1" name="location-o" /> -->
            <u-icon name="map-fill" color="#999" size="28"></u-icon>
            <view style="font-size: 24rpx; color: #999" :class="'list-address1'">{{ infoData.merAddress || "" }}</view>
          </view>
          <view class="" v-if="infoType === 1">
            <view class="markdown-list" v-for="(item, index) of infoData.activityList" :key="index">
              <span class="price mgr-2 font-s14">￥{{ item.price }}</span>
              <span class="color01 font-s12">{{ item.name }}</span>
            </view>
          </view>
        </view>
      </view>
      <view v-if="infoData.merPhone" @click="makeCall" style="display: flex; flex-direction: column; align-items: center">
        <image style="width: 48rpx; height: 48rpx; margin-bottom: 4rpx" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/21/phone_20250321152906A002.png"> </image>
        <view style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #1a1a1a; line-height: 33rpx; text-align: left; font-style: normal"> 电话 </view>
      </view>
      <!-- <view class="review mgl-2 tac dis-f align-center" v-if="infoType===1">
				<view class="">
					<van-icon size="16" name="chat-o" />
					<p class="color06 font-s14">点评</p>
				</view>
			</view> -->
    </view>
  </view>
</template>

<script>
import { IMG_URL } from "../../../config/index";
export default {
  props: {
    /** 列表样式与详情页布局不同1.列表 2.详情 */
    infoType: {
      type: Number,
      default: 1,
    },
    infoData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      imgurl: IMG_URL,
    };
  },

  methods: {
    getNmuber(number) {
      return Number(number);
    },
    //点击电话按钮
    makeCall() {
      uni.makePhoneCall({
        phoneNumber: this.infoData.merPhone,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.life-style {
  .review {
    width: 70rpx;
  }

  .lists-content {
    width: calc(100%-300rpx);
  }

  .mark {
    color: #f00;
  }

  .title {
    font-weight: 600;
  }

  .markdown-list {
    display: none;

    .price {
      color: #f86316;
      font-weight: 500;
    }
  }

  .life-lists:last-child .markdown-list {
    display: block;
  }

  .list-address1 {
    max-width: 470rpx;
    vertical-align: sub;
  }

  // .list-address2 {
  // 	max-width: 500rpx;
  // }
  .bottom {
    margin-bottom: 8rpx;
  }
}

.icon-img2 {
  width: 120rpx;
  height: 120rpx;
  border-radius: 20rpx;
}
</style>
